Styling the First Line of a Paragraph Using ::first-line
The ::first-line pseudo-element in CSS allows you to style only the first line of a block-level element. This is helpful for adding emphasis, decorative effects, or visual hierarchy to the start of a paragraph.
::first-linetargets only the first rendered line of text within a block element.It can be styled with text-related properties such as
color,font-size,font-weight,letter-spacing, andword-spacing.It works exclusively on block-level elements like
<p>,<div>, or<section>.It cannot insert content; it only modifies the appearance of the existing text.
Here, only the first line of the paragraph is styled differently, providing emphasis while the rest of the paragraph remains normal.
Use
::first-lineto highlight or emphasize the start of paragraphs.Stick to text-related CSS properties for consistent results.
Consider responsive layouts, as the first line may wrap differently on various screen sizes.
Combine with
::first-letterfor advanced typographic effects.